<div>
  <div
    class="d-flex align-items-center justify-content-end"
    *ngIf="!useQuickFilterService"
  >
    <div
      role="button"
      class="hand mr-3"
      *ngIf="cfgType !== CFG_TYPE.GROUND && isWriteWafAuthorized"
      (click)="openEditGroupSensorModal()">
      <em class="eos-icons">edit</em>
    </div>
    <section class="status-section">
      <label class="status-margin text-label">{{ 'setting.STATUS' | translate }}:</label>
      <mat-slide-toggle
        class="mr-2"
        id="group-waf-sensor-status-toggle"
        [disabled]="!isWriteWafAuthorized || cfgType === CFG_TYPE.GROUND"
        [(ngModel)]="enabled"
        [ngModelOptions]="{standalone: true}"
        (toggleChange)="toggleWAFConfigEnablement(enabled)"
      >
        <span
          [ngClass]="{
            'text-muted': !enabled,
            'text-success': enabled
          }"
        >
          {{
            (enabled
              ? "policy.status.ENABLED"
              : "policy.status.DISABLED") | translate
          }}
        </span>
      </mat-slide-toggle>
    </section>
    <app-quick-filter
      class="pull-left"
      [gridOptions]="gridOptions4GroupWafSensors"
      [showCount]="false"
    >
    </app-quick-filter>
  </div>
  <div class="clearfix" style="position: relative;">
    <ag-grid-angular
      #groupWafSensorsGrid
      id="group-waf-sensors-grid"
      style="width: 100%;"
      [ngStyle]="{ height: (resizableHeight - 90) + 'px' }"
      class="ag-theme-balham"
      [gridOptions]="gridOptions4GroupWafSensors"
      >
    </ag-grid-angular>
    <div
      *ngIf="!enabled"
      style="position: absolute; top: 0; width: 100%; background-color: rgba(0, 0, 0, 0.2); z-index: 50;"
      [ngStyle]="{ height: (resizableHeight - 90) + 'px' }">
    </div>
  </div>
</div>
